<!--
 * @描述: 个人中心的账户部分
 * @版权所有: 广东国星科技有限公司
 * @商业授权: www.mscodecloud.com
-->
<!-- eslint-disable -->
<template>
  <el-form ref="dataForm" :rules="rules" :model="user">
    <el-form-item :label="$t('sysuser.nickname')" prop="nickname">
      <el-input v-model.trim="user.nickname" maxlength="64" clearable />
    </el-form-item>
    <el-form-item :label="$t('systenant.tenantTel')" prop="phone">
      <el-input v-model.trim="user.phone" maxlength="20" clearable />
    </el-form-item>
    <el-form-item :label="$t('sysuser.geographic')" :required="true">
      <el-cascader ref="geographicRef" v-model.trim="user.geographic.city.key" :options="options" style="width: 100%" change-on-select expand-trigger="hover" filterable />
    </el-form-item>
    <el-form-item :label="$t('sysuser.address')" prop="address">
      <el-input v-model.trim="user.address" maxlength="40" clearable />
    </el-form-item>
    <el-form-item :label="$t('sysuser.profile')" prop="profile">
      <el-input v-model.trim="user.profile" type="textarea" maxlength="256" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">{{ $t('sysuser.updateaccount') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateSysUserDetail } from '@/api/admin'
import { getInfo } from '@/api/user'
import options from './region.js' // eslint-disable-line

export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          nickname: '',
          phone: '',
          geographic: {},
          address: '',
          profile: ''
        }
      }
    }
  },
  data() {
    return {
      options: region, // eslint-disable-line
      rules: {
        nickname: [{ required: true, validator: this.checkNickname, trigger: ['blur', 'change'] }],
        phone: [{ required: true, validator: this.checkPhone, trigger: ['blur', 'change'] }]
      }
    }
  },
  methods: {
    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = {}
          tempData.id = this.user.id
          tempData.nickname = this.user.nickname
          tempData.phone = this.user.phone
          tempData.provinceRegionCode = new Array(this.$refs['geographicRef']).length === 1 ? this.user.geographic.province.key : this.$refs['geographicRef'].value[0]
          tempData.cityRegionCode = new Array(this.$refs['geographicRef']).length === 1 ? this.user.geographic.city.key : this.$refs['geographicRef'].value[1]
          tempData.address = this.user.address
          tempData.profile = this.user.profile
          updateSysUserDetail(tempData).then(response => {
            if (response.message === 'success') {
              this.$message({
                message: this.$t('common.edit-success'),
                type: 'success',
                duration: 2000
              })
              getInfo().then(response => {}).catch(error => {
                console.error(error)
              })
            } else {
              this.handleWarning(response)
            }
          })
        }
      })
    },
    checkNickname(rule, value, callback) {
      if (!value) {
        return callback(new Error(this.$t('sysuser.nickname-required')))
      } else {
        callback()
      }
    },
    checkPhone(rule, value, callback) {
      if (!value) {
        return callback(new Error(this.$t('sysuser.phone-required')))
      } else {
        callback()
      }
    },
    handleWarning(response) {
      this.$message({
        message: response.message || response,
        type: 'warning',
        duration: 2000
      })
    }
  }
}
</script>
